//
// Tiles
// --------------------------------------------------

.tile {
  background: @console-panel-color;
  .panel_default_boxshadow();
  .box-shadow-hover-transition();
  padding: 10px 20px;
  margin-bottom: 20px;
  word-wrap: break-word;
  .box-sizing(border-box);
  // Prevent long, unbroken words from extending outside the tile.
  overflow-x: hidden;
  h1, h2, h3 {
    margin: (@line-height-computed / 2) 0px;
  }
  h3 .tile-timestamp {
    .text-muted;
    .small;
    @media (min-width: @screen-sm-min) {
      .pull-right();
    }
    @media (max-width: @screen-sm-min) {
      &:before {
        // em dash and non-breaking space
        content: '\2014\00a0'
      }
    }
  }
  &:hover {
    // give primary tile link hover state
    a.tile-target {
      color: @link-hover-color;
    }
  }
  &.tile-compact {
    margin-bottom: 12px;
  }
}
.tile.tile-template {
  a.label {
    font-size: @font-size-small;
  }
}
.tile.tile-project {
  min-height: 75px;
  h2 {
    margin: 10px 0;
  }
}
.tile.tile-status {
  background-color: @status-bg-color;
  border-top: 5px solid @status-border-color;
  margin-top: @grid-gutter-width;
}

.tile-click {
  cursor: pointer;
  position: relative;
  &:hover {
    .panel_default_boxshadow_hover();
    .btn {
      color: #000 !important;
    }
    .tile-target {
      color: @link-hover-color;
      &:hover {
        text-decoration: none;
      }
    }
    .font-icon.logo {
      opacity: .75;
    }
  }
}

.tile-flex {
  .box-shadow-hover-transition;
  .tile-badge-icon {
    cursor: help;
    font-size: @font-size-base;
    opacity: .38;
  }
  .image-icon, .template-icon {
    width: 30px;
    margin-right: 20px;
    font-size: 33px;
    opacity: .38;
  }
  &:hover {
    .image-icon, .template-icon, .tile-badge-icon {
      opacity: .75;
    }
    a.tile-target {
      color: @link-hover-color;
    }
  }
  h3 {
    margin: 3px 0px 2px;
  }
}

.label-tags {
  a.label {
    display: inline-block;
    margin-right: 3px;
    margin-top: -5px;
    &:hover {
      color: #111;
      background-color: #eee !important;
    }
  }
}
